<template>
	<view class="container">
		<u-form :model="formModel" ref="uform" labelPosition="top" label-width='160rpx'>
			<u-form-item label="收货人" prop="contactName" :required='true' borderBottom>
				<u-input v-model="formModel.contactName" placeholder='请填写收货人姓名' border="none" />
			</u-form-item>
			<u-form-item label="手机号码" prop="contactPhone" :required='true' borderBottom>
				<u-input v-model="formModel.contactPhone" placeholder='请填写收货人手机号码' border="none" />
			</u-form-item>
			<u-form-item label="所在地区" prop="area" :required='true' borderBottom @click='selectArea'>
				<u-input v-model="formModel.area" placeholder='请选择所在地区' disabled disabledColor='#FFFFFF' type="select" border="none" />
			</u-form-item>
			<u-form-item label="详细地址" prop="detailAddr" :required='true' borderBottom>
				<u-input v-model="formModel.detailAddr" placeholder='街道  楼牌号等' border="none"/>
			</u-form-item>
			<u-form-item>
				<view class="defaultAddr">
					<view style="margin-top: 40rpx;">
						<text>设为默认地址</text><br>
						<text style="font-size: 24rpx;">提醒：每次下单会默认推荐使用该地址</text>
					</view>
					<u-switch activeColor='#d4a781' v-model="formModel.default"></u-switch>
				</view>
			</u-form-item>
			<u-form-item>
				<view class="handle">
					<view style="width: 670rpx;margin-top: 40rpx;"><u-button @click='submit' type="error">保存</u-button></view>
					<view style="width: 670rpx;margin-top: 40rpx;" v-if="formModel.id"><u-button @click='deleteAction' type="info">删除</u-button></view>
				</view>
			</u-form-item>
		</u-form>
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor='#007AFF'></simple-address>
	</view>
</template>

<script>
	import {addr} from '@/api/addr.js'
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	export default{
		components:{simpleAddress},
		data() {
			return {
				formModel: {area:'', default: false},
				fromRules: {
					contactName: [{ required: true, message: '请填写收货人姓名', trigger: ['change','blur']}],
					// contactPhone: [{required: true, message: '请填写收货人手机号码', trigger: ['change','blur']}],
					// area: [{required: true, message: '请选择所在地区', trigger: ['change','blur']}],
					// detailAddr: [{required: true, message: '请填写详细地址', trigger: ['change','blur']}],
				},
				cityPickerValueDefault: [0, 0, 1],
			}
		},
		onLoad() {
			console.log('addrInfo', this.$Route.query.addrInfo)
			if(this.$Route.query.addrInfo){
				this.formModel = this.$Route.query.addrInfo
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uform.setRules(this.fromRules)
		},
		methods:{
			//选择所在区域
			selectArea(){
				this.$refs.simpleAddress.open()
			},
			//选择所在区域回调
			onConfirm(e) {
				console.log('地址回调', e)
				var city = e.labelArr[1]=='市辖区'?'':e.labelArr[1]
				this.formModel.area = e.labelArr[0]+' '+e.labelArr[1]+' '+e.labelArr[2]
				this.formModel.province = e.labelArr[0]
				this.formModel.city = e.labelArr[1]
				this.formModel.region = e.labelArr[2]
			},
			//提交表单
			submit() {
				console.log('this.formModel', this.formModel)
				if(!this.formModel.contactPhone){
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				if(!this.$verify.phone(this.formModel.contactPhone)){
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
				}else{
					if(this.formModel.id){
						this.updateAddrInfo()
					}else{
						this.createAddr()
					}
				}
				return
				this.$refs.uform.validate().then(res => {
					uni.$u.toast('校验通过')
					if(!this.$check.phone(this.formModel.contactPhone)){
						uni.showToast({
							title: '请输入正确的手机号',
							icon: 'none'
						})
					}else{
						if(this.formModel.id){
							this.updateAddrInfo()
						}else{
							this.createAddr()
						}
						
					}
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			//更新地址信息
			updateAddrInfo(){
				this.formModel.addrId = this.formModel.id
				addr.updateAddr(this.formModel).then(res => {
					if(res.data.code == 10000){
						uni.navigateBack();
						uni.showToast({
							title: '更新成功',
							icon: 'none'
						})
					}
				})
			},
			//创建
			createAddr(){
				addr.createAddr(this.formModel).then(res => {
					if(res.data.code == 10000){
						uni.navigateBack();
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
					}
				})
			},
			//删除
			deleteAction(){
				var _this = this
				uni.showModal({
					title: '是否确定删除',
					confirmText: '是',
					cancelText: '取消',
					success: (res) => {
						if(res.confirm){
							_this.formModel.obj_ids = [_this.formModel.id]
							addr.deleteAddr(_this.formModel).then(res => {
								if(res.data.code == 10000){
									uni.navigateBack();
									uni.showToast({
										title: '删除成功',
										icon: 'none'
									})
								}
							})
						}
					}
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		display: flex;
		flex-direction: column;
		padding: 0 40rpx;
		background-color: #FFFFFF;
		height: 100vh;
		input{
			padding: 0 20rpx;
			margin-top: 40rpx;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #FFFFFF;
			font-size: 30rpx;
		}
		textarea{
			padding: 0 20rpx;
			width: 670rpx;
			margin-top: 40rpx;
			height: 200rpx;
			background-color: #FFFFFF;
			font-size: 30rpx;
		}
		.handle{
			width: 100%;
			margin-top: 80rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.defaultAddr{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}
	}
</style>
